<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红绿灯</title>
</head>
<body>

<script>
    function duration(color,time) {
        return new Promise(function(resolve){
            setTimeout(() => {
                resolve()
                document.getElementById("light-color").style.backgroundColor = color;
            }, time);
        });
    }
    async function changeColor() {
        while(true){
            await duration("red",3000);
            await duration("yellow",2000);
            await duration("green",1000);
        }

    }
    changeColor()
</script>
</body>
</html>
